<template>
	<view class="flex-col bg--w111-fff goods_cate">
		<serchView @input="debouncedSearch" @submit="submit" />

		<scroll-view scroll-y class="serch_scroll" @scrolltolower="loadMore" v-if="serch_list.length">
			<view class="serch_list">
				<view class="line1 serch_item" v-for="(item,index) in serch_list" :key="item.id" @tap="goDetail(item)">
					{{item.store_name}}<text>({{item.code}})</text>
				</view>
			</view>
		</scroll-view>


		<view class="scroll_box flex flex-1" id="conter-box">
			<view class="w-168 bg--w111-f5f5f5">
				<view class="w-168 h-full " :class="{ fixed: conterFixed }" style="background: #F2F5F6;"
					:style="{ top: headerHeight+'px' }">
					<scroll-view :scroll-top="0" scroll-y="true" class="h-full">
						<view class="w-168 h-96 flex-center fs-26 text--w111-666" v-for="(item,index) in categoryErList"
							:key="index" :class="[{'aside_active': index===tabClick},'aside_' + index]"
							@tap="longClick(index,item)">
							<view class="top-ra">
								<text></text>
							</view>
							{{item.cate_name}}
							<view class="bottom-ra">
								<text></text>
							</view>
						</view>
						<view class="white-box"></view>
					</scroll-view>
				</view>
			</view>
			<view class="relative flex-1 flex-col">
				<view class="pl-24 pr-20 flex-1 flex-col" style="min-height: 0;"
					:class="!threeCateList.length ? 'mt-24' : ''">
					<scroll-view class="h-full" :scroll-top="0" scroll-y="true" @scrolltolower="lower" @scroll="scroll">

						<!-- 小图模板 -->
						<view class="pb-36">
							<view class="mb-24 flex justify-between" v-for="(item,index) in tempArr" :key="index"
								@tap="goDetail(item)">
								<easy-loadimage :image-src="item.image" :borderSrc="item.activity_frame.image"
									width="176rpx" height="176rpx" borderRadius="16rpx"></easy-loadimage>
								<view class="flex-1 flex-col justify-between pl-20">
									<view class="w-full">
										<view class="line1 w-346 fs-28 text-#333 lh-40rpx">
											<view class="book_name line1">{{item.store_name}}</view>
											<view class="book_author line1">{{item.store_info}}</view>
											<view class="book_author line1" v-if="item.code">编码:{{item.code}}</view>
										</view>

									</view>
									<view class="price_info w-346">
										<view class="price">
											<text class="unit">￥</text>
											<text class="value">{{item.price}}</text>
										</view>
										<view class="original_price">
											<text class="unit">￥</text>
											<text class="value">{{item.ot_price}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="!tempArr.length && !loading">
							<emptyPage title="暂无商品，去看点别的吧～"></emptyPage>
						</view>
						<view class="white-box"></view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let windowHeight = uni.getSystemInfoSync().screenHeight;
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	import {
		getCategoryList,
		getProductslist,
		getAttr,
		postCartNum
	} from '@/api/store.js';
	import {
		vcartList,
		getCartCounts,
		cartDel
	} from '@/api/order.js';
	import productWindow from '@/components/productWindow';
	import cusPreviewImg from '@/components/cusPreviewImg';
	import cartList from '@/components/cartList';
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import {
		goShopDetail
	} from '@/libs/order.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import skuSelect from '@/mixins/skuSelect.js'
	import emptyPage from '@/components/emptyPage.vue';
	export default {
		props: {
			level: {
				type: Number,
				default: 2
			},
			showType: {
				type: Number,
				default: 2
			},
			isFooter: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				windowHeight: this.isFooter ? windowHeight : windowHeight - 50,

				sysHeight: sysHeight,
				categoryList: [],
				navActive: 0,
				categoryTitle: '',
				categoryErList: [],
				tabLeft: 0,
				isWidth: 0, //每个导航栏占位
				tabClick: 0, //导航栏被点击
				iSlong: false,
				tempArr: [],
				loading: false,
				loadend: false,
				loadTitle: '加载更多',
				page: 1,
				limit: 10,
				cid: 0, //一级分类
				sid: 0, //二级分类
				tid: 0, //三级分类
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {}
				},
				productValue: [],
				attrValue: '', //已选属性
				storeName: '', //多属性产品名称
				id: 0,
				cartData: {
					cartList: [],
					iScart: false
				},
				totalPrice: 0.00,
				lengthCart: 0,
				is_vip: 0, //是否是会员
				cart_num: 0,
				storeInfo: {},
				scrollHeight: 0,
				threeCateList: [],
				threeClick: 0,
				topNavShow: true,
				selectSku: {},
				skuArr: [],
				getHeight: this.$util.getWXStatusHeight(),
				footerOpen: true,
				headerHeight: 0,
				conterTop: 0,
				scrollTop: 0,

				keywords: "",

				debouncedSearch: null,
				serch_list: [],
				searchPage: 1,
				searchLimit: 8
			}
		},
		components: {
			productWindow,
			cartList,
			emptyPage,
			cusPreviewImg
		},
		mixins: [skuSelect],
		computed: {
			...mapState({
				cartNum: state => state.indexData.cartNum
			}),
			...mapGetters(['isLogin', 'uid', 'cartNum', 'diyCategory']),
			headerFixed() {
				let isFixed = false;
				if (this.diyCategory.level == 3 && (this.diyCategory.index == 1 || this.diyCategory.index == 2)) {
					isFixed = this.scrollTop > 0;
				}
				return isFixed;
			},
			conterFixed() {
				let isFixed = false;
				if (this.diyCategory.level == 3 && (this.diyCategory.index == 1 || this.diyCategory.index == 2)) {
					isFixed = this.scrollTop && this.conterTop <= this.headerHeight;
				}
				return isFixed;
			},
			pageHeight() {
				let styleObject = {};
				if (this.diyCategory.level == 2 && (this.diyCategory.index == 2 || this.diyCategory.index == 3)) {
					styleObject['height'] = this.windowHeight + 'px';
				}
				if (this.diyCategory.level == 3 && (this.diyCategory.index == 1 || this.diyCategory.index == 2)) {
					styleObject['min-height'] = this.windowHeight + 'px';
				}
				return styleObject;
			},
		},
		mounted() {
			this.getAllCategory();
			setTimeout(() => {
				this.getScrollHeight();
			}, 500);
			if (this.isLogin) {
				this.getCartList(1);
			}
			uni.$off('newAttrNum');
			uni.$on('newAttrNum', (data) => {
				if (data.length) {
					this.tempArr.forEach((item) => {
						data.forEach(j => {
							if (item.id == j.id) {
								item.cart_num = j.num
							}
						})
					})
				}
			})
			// 关闭通讯
			uni.$off('newCartNum');
			// 与创建订单页面进行通讯
			uni.$on('newCartNum', (data) => {
				if (data.length) {
					this.tempArr.forEach((item) => {
						data.forEach(j => {
							if (item.id == j.product_id) {
								item.cart_num = 0
							}
						})
					})
					this.cartData.cartList.forEach((item) => {
						data.forEach(j => {
							if (item.id == j.id) {
								item.cart_num = 0
							}
						})
					})
					// this.getTotalPrice();
				}
			})
			// 三级分类样式2、样式3页面滚动和滚动到底部
			if (this.diyCategory.level == 3 && (this.diyCategory.index == 1 || this.diyCategory.index == 2)) {
				const query = uni.createSelectorQuery().in(this);
				query
					.select("#mp-header")
					.boundingClientRect((data) => {
						this.headerHeight = data.height;
					})
					.exec();
				uni.$on('scroll', (scrollTop) => {
					this.scrollTop = scrollTop;
					this.footerOpen = false;
					query
						.select("#conter-box")
						.boundingClientRect((data) => {
							this.conterTop = data.top;
						})
						.exec();
				})
				uni.$on('onReachBottom', () => {
					this.productslist();
				})
			}

			this.debouncedSearch = this.debounce((value) => {
				this.keywords = value;

				return
				this.getSearchList()
			}, 1000);
		},

		methods: {
			debounce(func, delay) {
				let timeoutId;
				return function(...args) {
					clearTimeout(timeoutId);
					timeoutId = setTimeout(() => {
						func.apply(this, args);
					}, delay);
				};
			},
			getSearchList() {
				let keyword = this.keywords.trim()
				if (!keyword.length) {
					this.searchPage = 1;
					this.serch_list = [];
					return
				}
				getProductslist({
					page: this.searchPage,
					limit: this.searchLimit,
					type: 1,
					cid: this.cid,
					sid: 0,
					tid: this.tid,
					keyword: keyword
				}).then(res => {
					if (res.data.length) this.serch_list = res.data;
				})
			},
			loadMore() {
				if (this.serch_list.length < this.searchLimit) return;
				this.searchPage++;
				this.getSearchList();
			},

			cancel(value) {
				this.serch_list = [];
			},
			submit(value) {
				this.searchPage = 1;
				this.serch_list = [];

				this.keywords = value;
				this.page = 1;
				this.loadend = false;
				this.tempArr = [];
				this.productslist();
			},
			openCart() {
				if (this.footerOpen) {
					this.getCartList(0)
				} else {
					this.footerOpen = true
				}
			},
			getScrollHeight() {
				let sysH = uni.getSystemInfoSync().statusBarHeight;
				this.scrollHeight = windowHeight - 138 - sysH;
			},
			getAllCategory() {
				let that = this;
				getCategoryList().then(res => {
					if (!res.data.length) return
					let data = res.data;
					that.categoryTitle = data[0].cate_name;
					that.cid = data[0].id;
					that.sid = data[0].children[0].id;
					that.tid = 0;
					that.navActive = 0;
					that.tabClick = 0;
					that.categoryList = data;
					// that.categoryErList = res.data[0].children ? res.data[0].children : [];


					that.threeCateList = res.data[0].children[0].children ? res.data[0].children[0].children : [];
					console.log('this.threeCateList', this.threeCateList)


					const categoryErList = res.data[0].children ? res.data[0].children : [];

					categoryErList.forEach((item, index) => {
						if (item.cate_name == '教材专区') categoryErList.splice(index, 1)
					})

					categoryErList.unshift({
						cate_name: '全部',
						id: 0
					})

					this.categoryErList = categoryErList;

					// if (this.categoryErList.length) {
					// 	this.categoryErList.unshift({
					// 		cate_name: '全部',
					// 		id: 0
					// 	})
					// }




					console.log(this.categoryErList)


					if (this.threeCateList.length) {
						this.threeCateList.unshift({
							cate_name: '全部商品',
							id: 0
						})
					}
					that.page = 1;
					that.loadend = false;
					that.tempArr = [];
					that.productslist();
				})
			},
			// 产品列表
			productslist() {

				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '';

				let sid = this.keywords ? 0 : that.sid;


				getProductslist({
					page: that.page,
					limit: that.limit,
					type: 1,
					cid: that.cid,
					sid: sid,
					// sid: that.sid,
					tid: that.tid,
					keyword: this.keywords,
					is_show: 1
				}).then(res => {
					console.log(res)
					let list = res.data,
						loadend = list.length < that.limit;
					that.tempArr = that.$util.SplitArray(list, that.tempArr);
					that.$set(that, 'tempArr', that.tempArr);
					that.loading = false;
					that.loadend = loadend;
					that.loadTitle = loadend ? "没有更多内容啦~" : "加载更多";
					that.page = that.page + 1;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多'
				});
			},
			tapNav(index, item) {
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0
				})
				let list = this.categoryList[index];
				this.navActive = index;
				this.categoryTitle = list.cate_name;
				this.categoryErList = item.children ? item.children : [];
				this.threeCateList = [];
				if (this.categoryErList.length) {
					this.threeCateList = item.children[0].children ? item.children[0].children : [];
					if (this.threeCateList && !this.haveAll(this.threeCateList)) {
						this.threeCateList.unshift({
							cate_name: '全部商品',
							id: 0
						})
					}
				}
				this.tabClick = 0;
				this.tabLeft = 0;
				this.cid = list.id;
				this.sid = list.children[0].id;
				this.tid = 0;
				this.page = 1;
				this.loadend = false;
				this.tempArr = [];
				this.productslist();
			},
			// 导航栏点击
			longClick(index, item) {
				this.tabClick = index; //设置导航点击了哪一个
				this.threeClick = 0;
				this.sid = this.categoryErList[index].id;
				// this.sid = '';
				this.tid = 0;
				this.threeCateList = item.children && item.children.length ? item.children : [];

				if (this.threeCateList && this.threeCateList.length && !this.haveAll(this.threeCateList)) {
					this.threeCateList.unshift({
						cate_name: '全部商品',
						id: 0
					})
				}
				this.page = 1;
				this.loadend = false;
				this.tempArr = [];
				this.productslist();
			},
			threeCateClick(index, item) {
				this.threeClick = index;
				this.tid = item.id;
				this.page = 1;
				this.loadend = false;
				this.tempArr = [];
				this.productslist();
			},
			deepClone(obj) {
				let newObj = Array.isArray(obj) ? [] : {}
				if (obj && typeof obj === "object") {
					for (let key in obj) {
						if (obj.hasOwnProperty(key)) {
							newObj[key] = (obj && typeof obj[key] === 'object') ? this.deepClone(obj[key]) : obj[key];
						}
					}
				}
				return newObj
			},
			haveAll(arr) {
				let cloneMap = this.deepClone(arr),
					list = [];
				cloneMap.forEach(item => {
					list.push(item.id);
				})
				return list.includes(0) ? true : false
			},
			// 生成订单；
			subOrder() {
				let that = this,
					list = that.cartData.cartList,
					ids = [];
				if (list.length) {
					list.forEach(item => {
						if (item.attrStatus && item.status) {
							ids.push(item.id)
						}
					});
					uni.navigateTo({
						url: '/pages/goods/order_confirm/index?cartId=' + ids.join(',')
					});
					that.cartData.iScart = false;
				} else {
					return that.$util.Tips({
						title: '请选择产品'
					});
				}
			},
			// 计算总价；
			getTotalPrice() {
				let that = this,
					list = that.cartData.cartList,
					totalPrice = 0.00;
				list.forEach(item => {
					if (item.attrStatus && item.status) {
						totalPrice = that.$util.$h.Add(totalPrice, that.$util.$h.Mul(item.cart_num, item
							.truePrice));
					}
				})
				that.$set(that, 'totalPrice', totalPrice);
			},
			getCartList(iSshow) {
				let that = this;
				vcartList().then(res => {
					that.$set(that.cartData, 'cartList', res.data);
					if (res.data.length) {
						that.$set(that.cartData, 'iScart', iSshow ? false : !that.cartData.iScart);
					} else {
						that.$set(that.cartData, 'iScart', false);
					}
					if (!res.data.length) {
						this.$store.commit('indexData/setCartNum', 0);
						this.tempArr.forEach((item) => {
							item.cart_num = 0
						})
					}
					// that.getTotalPrice();
				})
			},
			getCartNum() {
				getCartCounts().then(res => {
					this.$store.commit('indexData/setCartNum', res.data.count)
					this.totalPrice = res.data.sum_price;
					// 删除购物车回到分类页确保数据更新
					if (res.data.count <= 0) {
						this.tempArr.forEach((item) => {
							item.cart_num = 0
						})
					}
				});
			},
			CartNumAdd(index, item) {
				if (item.is_limit && item.cart_num >= item.limit_num) {
					this.$util.Tips({
						title: "购买最多不能超过" + item.limit_num
					});
				} else {
					this.ChangeCartNumDan(true, index, item);
				}
			},
			// 商品详情接口；
			getAttrs(id) {
				let that = this;
				getAttr(id, 0).then(res => {
					// uni.hideLoading();
					that.$set(that.attr, 'productAttr', res.data.productAttr);
					that.$set(that, 'productValue', res.data.productValue);
					that.$set(that, 'is_vip', res.data.storeInfo.is_vip);
					that.$set(that, 'storeInfo', res.data.storeInfo);
					that.skuArr = [];
					for (let key in res.data.productValue) {
						let obj = res.data.productValue[key];
						that.skuArr.push(obj)
					}
					if (!that.skuArr.length) {
						that.skuArr = [{
							image: this.storeInfo.image,
							suk: this.storeInfo.store_name,
							price: this.storeInfo.price
						}];
					}
					this.$set(this, "selectSku", that.skuArr[0]);
					that.DefaultSelect();
				})
			},
			//点击sku图片打开轮播图
			showImg(index) {
				this.$refs.cusPreviewImg.open(this.selectSku.suk)
			},
			//滑动轮播图选择商品
			changeSwitch(e) {
				let productSelect = this.skuArr[e];
				this.$set(this, 'selectSku', productSelect);
				var skuList = productSelect.suk.split(',');
				skuList.forEach((i, index) => {
					this.$set(this.attr.productAttr[index], 'index', skuList[index]);
				})
				if (productSelect) {
					this.$set(this.attr.productSelect, 'image', productSelect.image);
					this.$set(this.attr.productSelect, 'price', productSelect.price);
					this.$set(this.attr.productSelect, 'stock', productSelect.stock);
					this.$set(this.attr.productSelect, 'unique', productSelect.unique);
					this.$set(this.attr.productSelect, 'cart_num', 1);
					this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
					this.$set(this, 'attrValue', productSelect.suk);
					this.$set(this, 'attrTxt', '已选择');
				}
			},
			// 去详情页
			goDetail(item) {
				this.serch_list = [];
				goShopDetail(item, this.uid).catch(res => {
					uni.navigateTo({
						url: `/pages/goods_details/index?id=${item.id}&fromType=1`
					});
				});
			},
			lower(e) {
				this.productslist();
			},
			scroll(e) {
				this.footerOpen = false;
				uni.$emit('scroll');
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/goods/goods_search/index'
				})
			},
			moveHandle() {}
		}
	}
</script>

<style lang="scss" scoped>
	.goods_cate {
		height: 100vh;
		overflow: hidden;
		position: relative;

		.serch_scroll {
			// max-height: calc(100vh - 200rpx);
			max-height: 300px;
			border-radius: 0 0 20rpx 20rpx;
			padding: 0 28rpx;
			box-sizing: border-box;
			// background: #F2F5F6;
			background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
			position: absolute;
			left: 0;
			top: 112rpx;
			z-index: 99;

			.serch_item {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;

				border-top: 2rpx solid rgba(219, 219, 219, 0.5);
				padding: 28rpx 0;
				box-sizing: border-box;

				&:first-child {
					border-top: none;
				}

				text {
					font-size: 24rpx;
					color: #AAAAAA;
				}
			}
		}
	}

	/deep/.base-tag {
		background-color: #f5f5f5;
	}

	.book_name {
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
	}

	.book_author {
		font-size: 24rpx;
		color: #AAAAAA;
	}


	.bntCon {
		position: relative;

		&:before {
			position: absolute;
			content: '';
			width: 6rpx;
			height: 80rpx;
			background: radial-gradient(rgba(0, 0, 0, 0.082) 0%, rgba(0, 0, 0, 0) 100%);
			left: -22rpx;
		}
	}

	.bntAll {
		position: relative;

		&:before {
			position: absolute;
			content: '';
			width: 6rpx;
			height: 136rpx;
			background: radial-gradient(rgba(0, 0, 0, 0.082) 0%, rgba(0, 0, 0, 0) 100%);
			left: -6rpx;
		}
	}

	.scroll_box {
		overflow: hidden;
	}

	.aside_active {
		background-color: #fff;
		width: 100%;
		text-align: center;
		color: var(--view-theme);
		font-weight: 500;
		position: relative;

		&::after {
			content: '';
			width: 6rpx;
			height: 48rpx;
			background-color: var(--view-theme);
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			border-radius: 0 10rpx 10rpx 0;
		}

		.top-ra {
			width: 32rpx;
			height: 32rpx;
			background-color: #fff;
			position: absolute;
			right: 0;
			top: -32rpx;

			text {
				position: absolute;
				top: 0;
				right: 0;
				width: 100%;
				height: 100%;
				background-color: #f5f5f5;
				display: inline-block;
				border-radius: 0 0 24rpx 0;
			}
		}

		.bottom-ra {
			width: 32rpx;
			height: 32rpx;
			background-color: #fff;
			position: absolute;
			right: 0;
			bottom: -32rpx;

			text {
				position: absolute;
				top: 0;
				right: 0;
				width: 100%;
				height: 100%;
				background-color: #f5f5f5;
				display: inline-block;
				border-radius: 0 24rpx 0 0;
			}
		}
	}

	.cate_active {
		color: var(--view-theme);
		background: var(--view-minorColorT);
		border: 1rpx solid var(--view-theme);
	}

	.footer {
		position: fixed;
		/* #ifdef H5 */
		bottom: 140rpx;
		/* #endif */
		/* #ifdef MP || APP-PLUS */
		bottom: 20px;
		/* #endif */
		left: 20rpx;
		z-index: 101;
	}

	.cart_box {
		width: 0;
		height: 96rpx;
		border-radius: 48rpx;
		background-color: rgba(0, 0, 0, 0.83);
		padding-left: 94rpx;
		transition: 0.3s;

		&.open {
			width: 710rpx;
		}
	}

	.show-footer {
		/* #ifdef MP || APP-PLUS */
		bottom: calc(140rpx + env(safe-area-inset-bottom));
		/* #endif */
	}

	.text-primary-con {
		color: var(--view-theme);
	}

	.bg-primary-light {
		background: var(--view-minorColorT);
	}

	.pl-30 {
		padding-left: 30rpx;
	}

	.border_e {
		border-bottom: 1px solid #eee;
	}

	.active_pic {
		width: 104rpx;
		height: 104rpx;
		background-color: #fff;
		padding: 3rpx;
		border-radius: 50%;
		border: 3rpx solid var(--view-theme);

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.scroll_pic {
		image {
			width: 92rpx;
			height: 92rpx;
			border-radius: 50%;
		}
	}

	.active_cate_text {
		background: linear-gradient(90deg, var(--view-gradient) 0, var(--view-theme) 100%);
		color: #fff;
		border-radius: 20rpx;
		margin-top: 8rpx;
	}

	.badge-style {
		position: absolute;
		top: -2rpx;
		right: -14rpx;

		/deep/ .uni-badge--error {
			background-color: var(--view-theme) !important;
		}

		.uni-badge {
			color: var(--view-theme);
			border: 1px solid var(--view-theme);
			z-index: 29;
		}
	}

	.white-box {
		height: calc(300rpx + env(safe-area-inset-bottom));
	}

	.mp-header.fixed {
		top: 0;
		right: 0;
		left: 0;
		z-index: 10;
		background: #FFFFFF;
	}
</style>